import {classnames, computed, designPage, getComponentCls, reactive} from "plain-design-composition";
import data2 from '../../../data/data-2.json';
import {DemoRow} from "../../Demo/DemoRow";
import {Checkbox, VirtualList} from "../../../../packages";
import {Alert} from "antd";

export const demo1 = designPage(() => {

  const sourceColors = ['primary', 'success', 'warning', 'error'];
  let colors: string[] = [];
  const getRandomColor = () => {
    if (colors.length === 0) {colors = [...sourceColors];}
    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1)[0];
    const backgroundColor = `var(--${getComponentCls(`color${palette.charAt(0).toUpperCase() + palette.slice(1)}Bg`)})`;
    return { backgroundColor };
  };
  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));

  function getClass(item: any) {
    console.log('item', item);
    return {};
  }

  return () => (
    <DemoRow title={'基本用法'}>
      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
        <VirtualList
          data={list.value} size={40} v-slots={{
          default: ({ item, index }) => (
            <div
              key={index}
              onClick={() => console.log(index, { ...item })}
              style={{
                ...item.color,
                height: '40px',
                display: 'block',
                width: '100%'
              }}
            >
              <div
                style={{
                  width: '40px',
                  backgroundColor: 'var(--ant-blue-2)',
                  height: '100%',
                  overflow: 'hidden',
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                className={classnames(getClass(item))}>
                {index + 1}
              </div>
              <div style={{
                width: 'calc(100% - 40px)',
                float: 'right',
                height: '100%',
                padding: '0 12px',
                display: 'flex',
                justifyContent: 'center',
                flexDirection: 'column',
                boxSizing: 'border-box',
              }}>
                <div style={{
                  fontSize: '12px',
                  display: 'flex',
                  justifyContent: 'space-between'
                }}>
                  <span>{item.name}</span>
                  <span>{item.date}</span>
                </div>
                <div style={{
                  textAlign: 'right',
                }}>
                  {item.star}
                </div>
              </div>
            </div>
          )
        }}/>
      </div>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const sourceColors = ['primary', 'success', 'warning', 'error'];
  let colors: string[] = [];
  const getRandomColor = () => {
    if (colors.length === 0) {colors = [...sourceColors];}
    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1)[0];
    const backgroundColor = `var(--${getComponentCls(`color${palette.charAt(0).toUpperCase() + palette.slice(1)}Bg`)})`;
    return { backgroundColor };
  };
  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));

  return () => (
    <DemoRow title={'动态高度'}>
      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
        <VirtualList data={list.value} size={60} dynamicSize v-slots={{
          default: ({ item, index }) => (
            <div
              key={index}
              data-vid={index}
              onClick={() => console.log(index, { ...item })}
              style={{
                ...item.color,
                height: item.size + 'px',
                display: 'block',
                width: '100%'
              }}
            >
              <div
                style={{
                  width: '40px',
                  backgroundColor: 'var(--ant-blue-2)',
                  height: '100%',
                  overflow: 'hidden',
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                {index + 1}
              </div>
              <div style={{
                width: 'calc(100% - 40px)',
                float: 'right',
                height: '100%',
                padding: '0 12px',
                display: 'flex',
                justifyContent: 'center',
                flexDirection: 'column',
                boxSizing: 'border-box',
              }}>
                <div style={{
                  fontSize: '12px',
                  display: 'flex',
                  justifyContent: 'space-between'
                }}>
                  <span>{item.name}</span>
                  <span>{item.date}</span>
                </div>
                <div style={{
                  textAlign: 'right',
                  color: 'white'
                }}>
                  {item.star}
                </div>
              </div>
            </div>
          )
        }}/>
      </div>
    </DemoRow>
  );
});

export const demo3 = designPage(() => {

  const sourceColors = ['primary', 'success', 'warning', 'error'];
  let colors: string[] = [];
  const getRandomColor = () => {
    if (colors.length === 0) {colors = [...sourceColors];}
    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1)[0];
    const backgroundColor = `var(--${getComponentCls(`color${palette.charAt(0).toUpperCase() + palette.slice(1)}Bg`)})`;
    return { backgroundColor };
  };
  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));

  const state = reactive({ disabledVirtualScroll: false, });

  function getClass(item: any) {
    console.log('item', item);
    return {};
  }

  return () => (
    <DemoRow title={'禁用/启用虚拟滚动'}>
      <Checkbox v-model={state.disabledVirtualScroll} label={'禁用虚拟滚动'}/>
      <br/>
      <br/>
      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }} key={state.disabledVirtualScroll ? '1' : '2'}>
        <VirtualList data={list.value} size={40} disabled={state.disabledVirtualScroll} v-slots={{
          default: ({ item, index }) => (
            <div
              key={index}
              onClick={() => console.log(index, { ...item })}
              style={{
                ...item.color,
                height: '40px',
                display: 'block',
                width: '100%'
              }}
            >
              <div
                style={{
                  width: '40px',
                  backgroundColor: 'var(--ant-blue-2)',
                  height: '100%',
                  overflow: 'hidden',
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                className={classnames(getClass(item))}>
                {index + 1}
              </div>
              <div style={{
                width: 'calc(100% - 40px)',
                float: 'right',
                height: '100%',
                padding: '0 12px',
                display: 'flex',
                justifyContent: 'center',
                flexDirection: 'column',
                boxSizing: 'border-box',
              }}>
                <div style={{
                  fontSize: '12px',
                  display: 'flex',
                  justifyContent: 'space-between'
                }}>
                  <span>{item.name}</span>
                  <span>{item.date}</span>
                </div>
                <div style={{
                  textAlign: 'right',
                  color: 'white'
                }}>
                  {item.star}
                </div>
              </div>
            </div>
          )
        }}/>
      </div>
    </DemoRow>
  );
});

export const demo4 = designPage(() => {

  const sourceColors = ['primary', 'success', 'warning', 'error'];
  let colors: string[] = [];
  const getRandomColor = () => {
    if (colors.length === 0) {colors = [...sourceColors];}
    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1)[0];
    const backgroundColor = `var(--${getComponentCls(`color${palette.charAt(0).toUpperCase() + palette.slice(1)}Bg`)})`;
    return { backgroundColor };
  };
  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));

  function getClass(item: any) {
    console.log('item', item);
    return {};
  }

  return () => (
    <DemoRow title={'横向滚动'}>
      <Alert message="当需要横向滚动时，必须指定横向滚动的宽度" style={{ marginBottom: '16px' }}/>
      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
        <VirtualList
          data={list.value} width={200} size={40} v-slots={{
          default: ({ item, index }) => (
            <div
              key={index}
              onClick={() => console.log(index, { ...item })}
              style={{
                ...item.color,
                height: '40px',
                display: 'block',
                width: '100%'
              }}
            >
              <div
                style={{
                  width: '40px',
                  backgroundColor: 'var(--ant-blue-2)',
                  height: '100%',
                  overflow: 'hidden',
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                className={classnames(getClass(item))}>
                {index + 1}
              </div>
              <div style={{
                width: 'calc(100% - 40px)',
                float: 'right',
                height: '100%',
                padding: '0 12px',
                display: 'flex',
                justifyContent: 'center',
                flexDirection: 'column',
                boxSizing: 'border-box',
              }}>
                <div style={{
                  fontSize: '12px',
                  display: 'flex',
                  justifyContent: 'space-between'
                }}>
                  <span>{item.name}</span>
                  <span>{item.date}</span>
                </div>
                <div style={{
                  textAlign: 'right',
                }}>
                  {item.star}
                </div>
              </div>
            </div>
          )
        }}/>
      </div>
      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
        <VirtualList
          data={list.value} width={600} size={40} v-slots={{
          default: ({ item, index }) => (
            <div
              key={index}
              onClick={() => console.log(index, { ...item })}
              style={{
                ...item.color,
                height: '40px',
                display: 'block',
                width: '100%'
              }}
            >
              <div
                style={{
                  width: '40px',
                  backgroundColor: 'var(--ant-blue-2)',
                  height: '100%',
                  overflow: 'hidden',
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                className={classnames(getClass(item))}>
                {index + 1}
              </div>
              <div style={{
                width: 'calc(100% - 40px)',
                float: 'right',
                height: '100%',
                padding: '0 12px',
                display: 'flex',
                justifyContent: 'center',
                flexDirection: 'column',
                boxSizing: 'border-box',
              }}>
                <div style={{
                  fontSize: '12px',
                  display: 'flex',
                  justifyContent: 'space-between'
                }}>
                  <span>{item.name}</span>
                  <span>{item.date}</span>
                </div>
                <div style={{
                  textAlign: 'right',
                }}>
                  {item.star}
                </div>
              </div>
            </div>
          )
        }}/>
      </div>
    </DemoRow>
  );
});
